import Vue from 'vue'
import App from './App.vue'
// 1.引用Vuex
import Vuex from 'vuex'
// 2.让vue使用vuex
Vue.use(Vuex)

// 3.创建VueX -- state  实例仓库
const store = new Vuex.Store({
  state: {
    name: '',
    num: '',
    price: '',
    goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
  },
  mutations: {
    // 减少
    addFn1(state,index) {
      state.goodList[index].num --
    },
    // 增加
    addFn2(state,index) {
      state.goodList[index].num ++
    },
    // 删除
    addFn3(state,index) {
      state.goodList.splice(index,1)
    },
    // 添加
    addFn4(state) {
      state.goodList.push({
        name: state.name,
        num: state.num,
        price: state.price,
        checked:false,
      })
      state.name = ''
      state.num = ''
      state.price = ''
    },
    // 全选控制单选
    addFn5(state,checked) {
      state.goodList.forEach(item =>item.checked = checked)
    },
    // addFn6(state) {
    //   console.log(state.goodList[0].checked)
    // },
  }
})

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
